<template>
  <div>
    <div data-role="page">
      <section class="shops-content">
        <shops_top :tabstr="'Shops'"></shops_top>
        <div>
          <div class="tab-content">
            <div class="tab-content-in">
              <div class="receive-card" v-show="false">
                <div class="receive-card-in">
                  <div class="receive-box active">
                    <p class="price"><span>￥</span>10</p>
                    <p class="use">满98使用</p>
                    <p class="time">2018.5.30-2018.6.30</p>
                  </div>
                  <div class="receive-box">
                    <p class="price"><span>￥</span>10</p>
                    <p class="use">满98使用</p>
                    <p class="time">2018.5.30-2018.6.30</p>
                  </div>
                </div>
              </div>
              <div class="lunbo">
                <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
                  <!-- slides -->
                  <swiper-slide class="swiper-slide" v-for="(item,ui) in bannerr" :key="ui"><img
                    style="height:205px;width:100%;" :src=item></swiper-slide>
                </swiper>
              </div>
              <div class="receive-map">
                <div class="map-content">
                  <div class="top-add">
                    <i class="icon"></i>
                    <span class="text">{{Store.address}}</span>
                  </div>
                  <div class="shopMap" id="shopMap" style="height:190px;width:100%;">

                  </div>
                </div>
                <ul class="map-list">
                  <li class="list-li">详细地址：{{Store.address}}</li>
                  <li class="list-li">联系方式：{{Store.mobile}}</li>
                  <li class="list-li"> 营业时间：{{Store.businessStartTime}}-{{Store.businessEndTime}}</li>
                  <!--{{Store.business_start_time}}-{{Store.business_end_time}}-->
                  <li class="list-li">店铺介绍：{{Store.slogan}}</li>
                  <li class="list-li" v-show="false"><a href="qualification.html" data-ajax="false">营业许可资质</a></li>
                </ul>
              </div>
            </div>

          </div>
        </div>
        <div class="layer-content">
          <div class="layer-content-in">
            <i class="close-icon guanbi">

            </i>
            <div class="card-num">
              10
            </div>
            <p class="success">已领取成功，存至卡券</p>
            <a href="commodity.html" class="use-btn" data-ajax="false">去使用</a>
          </div>
        </div>
      </section>
    </div>
    <!-- <div class="backTo" onclick="javascript:history.back(-1);">返回</div> -->
  </div>
</template>
<style scoped>
  @import "../../../assets/business/css/shops.css";
</style>
<script>
  import shops_top from "@/components/personal/Shops_top";
  import {swiper, swiperSlide} from 'vue-awesome-swiper'

  export default {
    components: {
      shops_top,
      swiper,
      swiperSlide,
    },
    mounted() {
      console.log(22222)
      this.TheStore();
      $(function () {
        $(".receive-box").click(function () {
          if ($(this).hasClass('active')) {
            return;
          }
          $(this).addClass("active");
          // $('.layer-content').show();
          // console.log(layer);
          var w = layer.open({
            type: 1,
            title: "",
            content: $(".layer-content"),
            btn: "",
            shadeClose: false,
            shade: 0.3,

          });
          $(".guanbi").click(function () {
            $(".layui-layer-shade").fadeOut()
          })

          // $('.layer-content .close-icon').click(function () {
          //     layer.close(w);
          //     $('.layer-content').hide();
          // });
        })
      })
    },
    data() {
      return {
        bannerr: [],
        shopsID: 0,
        Store: {},
        title: '',
        img: '',
        shuoming: '',
        comid: {},
        companyId: '',
        swiperOption: {//v-swiper
          autoplay: true,
          pagination: {
            el: '.swiper-pagination',
          }
        },
        headline: {
          autoplay: {
            delay: 3000
          },
          direction: 'vertical',
        },
      }
    }, mounted() {
      this.TheStore();
      this.shuaxin();
      this.getwxconfig()
    },
    methods: {
      getwxconfig() {
        var vm = this;
        this.$http.get(this.APIURL_PREFIX + "/api/wxs/config?url=" + escape(location.href.split('#')[0])).then((response) => {
          var appid = 'wx488ae3f57360b7ea';
        wx.config({
          debug: false,
          appId: appid,
          timestamp: response.data.data.timestamp,
          nonceStr: response.data.data.noncestr,
          signature: response.data.data.signature,
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode']
        })
        wx.ready(function () {
          wx.onMenuShareTimeline({
            title: vm.title,
            link: "http://" + window.location.host + "/wap/wx/login?fk=1-48-" + localStorage.headid + "-" + vm.shopsID,
            imgUrl: vm.img,
            desc: vm.shuoming,
            success: function () {
            },
            cancel: function () {
            }
          });
          wx.onMenuShareAppMessage({
            title: vm.title,
            link: "http://" + window.location.host + "/wap/wx/login?fk=1-48-" + localStorage.headid + "-" + vm.shopsID,
            imgUrl: vm.img,
            desc: vm.shuoming,
            success: function () {
            },
            cancel: function () {
            }
          });

        })
      })
      },
      TheStore() {
        this.shopsID = this.$route.query.id;
        console.log(this.shopsID)
        this.$http.get(this.APIURL_PREFIX + '/api/wap/company/SelectOnly/' + this.shopsID).then((response) => {
          this.Store = response.data.data
        this.title = response.data.data.companyName
        this.img = response.data.data.headimgurl
        this.shuoming = response.data.data.slogan
        this.bannerr = this.Store.imgHeadPhoto.split(",")
        var center = new qq.maps.LatLng(response.data.data.latitude, response.data.data.longitude);
        var map = new qq.maps.Map(document.getElementById("shopMap"));
        map.panTo(center);
        map.zoomTo(13);
        var marker = new qq.maps.Marker({
          position: center,
          map: map
        });
        this.getwxconfig()
      })
      },
      shuaxin() {//有错误中
        this.$http.post(this.APIURL_PREFIX + '/api/wap/userHistoricalTraceList/create', $.param({companyId: this.shopsID})).then((response) => {}
      ).
        catch(function (err) {
          // console.log(err)
        })
      }
    }
  }
</script>
